<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>HTML5逆时钟SVG</title>

<style class="cp-pen-styles">
.container{
	text-align: center;
	margin-top: 20px;
	padding: 20px;
}
</style>

</head>
<body>

<div class="container">

	<svg width="600" height="600" class="svg-element">

	<filter id="f4" x="-50%" y="-20%" width="200%" height="140%">
		<feoffset result="offOut" in="SourceAlpha" dx="0" dy="25"></feoffset>
		<fegaussianblur result="blurOut" in="offOut" stdDeviation="10"></fegaussianblur>
		<feblend in="SourceGraphic" in2="blurOut" mode="normal"></feblend>
	</filter>

	<filter id="blurred-source" x="-50%" y="-20%" width="200%" height="140%">
		<fegaussianblur in="color" stdDeviation="5" result="blurOut"></fegaussianblur>
	</filter>

	<filter id="inset-shadow">
		<feoffset dx="0" dy="10"></feoffset>                                                         <!-- Shadow Offset -->
		<fegaussianblur stdDeviation="15" result="offset-blur"></fegaussianblur>                           <!-- Shadow Blur -->
		<fecomposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></fecomposite> <!-- Invert the drop shadow to create an inner shadow -->
		<feflood flood-color="black" flood-opacity="1" result="color"></feflood>                     <!-- Color & Opacity -->
		<fecomposite operator="in" in="color" in2="inverse" result="shadow"></fecomposite>               <!-- Clip color inside shadow -->
		<fecomponenttransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
			<fefunca type="linear" slope="1"></fefunca>
		</fecomponenttransfer>
		<fecomposite operator="over" in="shadow" in2="SourceGraphic"></fecomposite>                    <!-- Put shadow over original object -->
	</filter>

	<filter id="inset-shadow-big">
		<feoffset dx="0" dy="4"></feoffset>                                                         <!-- Shadow Offset -->
		<fegaussianblur stdDeviation="2" result="offset-blur"></fegaussianblur>                           <!-- Shadow Blur -->
		<fecomposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></fecomposite> <!-- Invert the drop shadow to create an inner shadow -->
		<feflood flood-color="white" flood-opacity="1" result="color"></feflood>                     <!-- Color & Opacity -->
		<fecomposite operator="in" in="color" in2="inverse" result="shadow"></fecomposite>               <!-- Clip color inside shadow -->
		<fecomponenttransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
			<fefunca type="linear" slope="0.5"></fefunca>
		</fecomponenttransfer>
		<fecomposite operator="over" in="shadow" in2="SourceGraphic"></fecomposite>                    <!-- Put shadow over original object -->
	</filter>

	<filter id="inset-shadow-big-bottom">
		<feoffset dx="0" dy="10"></feoffset>                                                         <!-- Shadow Offset -->
		<fegaussianblur stdDeviation="2" result="offset-blur"></fegaussianblur>                           <!-- Shadow Blur -->
		<fecomposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"></fecomposite> <!-- Invert the drop shadow to create an inner shadow -->
		<feflood flood-color="#FFF" flood-opacity="1" result="color"></feflood>                     <!-- Color & Opacity -->
		<fecomposite operator="in" in="color" in2="inverse" result="shadow"></fecomposite>               <!-- Clip color inside shadow -->
		<fecomponenttransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
			<fefunca type="linear" slope="0.5"></fefunca>
		</fecomponenttransfer>
		<fecomposite operator="over" in="shadow" in2="SourceGraphic" result="final-shadow-1"></fecomposite>                    <!-- Put shadow over original object -->
		
		<feoffset dx="0" dy="-12"></feoffset>                                                         <!-- Shadow Offset -->
		<fegaussianblur stdDeviation="2" result="offset-blur"></fegaussianblur>                           <!-- Shadow Blur -->
		<fecomposite operator="out" in="final-shadow-1" in2="offset-blur" result="inverse"></fecomposite> <!-- Invert the drop shadow to create an inner shadow -->
		<feflood flood-color="#69c39b" flood-opacity="1" result="color"></feflood>                     <!-- Color & Opacity -->
		<fecomposite operator="in" in="color" in2="inverse" result="shadow"></fecomposite>               <!-- Clip color inside shadow -->
		<fecomponenttransfer in="shadow" result="shadow">                                   <!-- Shadow Opacity -->
			<fefunca type="linear" slope="0.5"></fefunca>
		</fecomponenttransfer>
		<fecomposite operator="over" in="shadow" in2="final-shadow-1" result="final-shadow-2"></fecomposite>                    <!-- Put shadow over original object -->
		
	</filter>

	<lineargradient id="LG" gradientTransform="rotate(90 .5 .5)">      
		<stop id="s0" offset="0" stop-color="#d6f8e9"></stop>
		<stop id="s2" offset="1" stop-color="#9ee1c4"></stop>
	</lineargradient>

	<lineargradient id="LG2" gradientTransform="rotate(-90 .5 .5)">      
		<stop id="s0" offset="0.07" stop-color="#fdfefe"></stop>
		<stop id="s1" offset="0.5" stop-color="#98e2c2"></stop>
		<stop id="s2" offset="0.8" stop-color="#79c9a7"></stop>
		<stop id="s3" offset="1" stop-color="#5fbc95"></stop>
	</lineargradient>

	<lineargradient id="arrow1" gradientTransform="rotate(-90 .5 .5)">      
		<stop id="s0" offset="0" stop-color="#07594f"></stop>
		<stop id="s2" offset="1" stop-color="#01443c"></stop>
	</lineargradient>

	<lineargradient id="arrowRed" gradientTransform="rotate(-90 .5 .5)">      
		<stop id="s0" offset="0" stop-color="#fd5959"></stop>
		<stop id="s2" offset="1" stop-color="#fe7c7c"></stop>
	</lineargradient>

	<lineargradient id="center-knob-outter" gradientTransform="rotate(90 .5 .5)">      
		<stop id="s0" offset="0" stop-color="#fffefe"></stop>
		<stop id="s2" offset="1" stop-color="#86ecdb"></stop>
	</lineargradient>

	<lineargradient id="center-knob-inner" gradientTransform="rotate(90 .5 .5)">      
		<stop id="s0" offset="0" stop-color="#a0dcd2"></stop>
		<stop id="s2" offset="1" stop-color="#dff9ef"></stop>
	</lineargradient>

	<g transform="translate(50, 20)">
	
		<rect x="0" y="0" width="382" height="382" fill="url(#LG)" filter="url(#inset-shadow-big-bottom)" rx="75" ry="105"></rect>
	
		<circle cx="191" cy="191" r="155" fill="url(#LG2)"></circle>
		<circle cx="191" cy="191" r="130" fill="#53d2c5"></circle>
		<circle cx="191" cy="191" r="130" fill="#53d2c5" filter="url(#inset-shadow)"></circle>
	
		<g width="200" height="200" transform="translate(191 191) rotate(200.024)">
			<animatetransform attributeName="transform" type="translate" dur="4s" values="191,191;191,191" repeatCount="indefinite"></animatetransform>
			<animatetransform attributeName="transform" additive="sum" type="rotate" dur="86400s" values="550, 0 0;220 0 0" repeatCount="indefinite"></animatetransform>
			<rect x="0" y="0" width="22" height="70" fill="url(#arrow1)" fill-opacity="0.5" filter="url(#blurred-source)" rx="10" ry="10" transform="translate(-11, -15)"></rect>
		</g>  
	
		<g width="200" height="200" transform="translate(191 191) rotate(200.024)">
			<animatetransform attributeName="transform" type="translate" dur="4s" values="191,191;191,191" repeatCount="indefinite"></animatetransform>
			<animatetransform attributeName="transform" additive="sum" type="rotate" dur="86400s" values="550, 0 0;220 0 0" repeatCount="indefinite"></animatetransform>
			<rect x="0" y="0" width="20" height="70" fill="url(#arrow1)" rx="10" ry="10" transform="translate(-10, -10)"></rect>
		</g>
	
		<g width="200" height="200" transform="translate(191 191) rotate(90.5833)">
			<animatetransform attributeName="transform" type="translate" dur="4s" values="191,191;191,191" repeatCount="indefinite"></animatetransform>
			<animatetransform attributeName="transform" additive="sum" type="rotate" dur="3600s" values="450,0 0;90 0 0" repeatCount="indefinite"></animatetransform>
			<rect x="0" y="0" width="18" height="104" fill="url(#arrow1)" fill-opacity="0.8" filter="url(#blurred-source)" rx="8" ry="8" transform="translate(-9, -15)"> /&gt;
		</rect></g>   
	
		<g width="200" height="200" transform="translate(191 191) rotate(90.5833)">
			<animatetransform attributeName="transform" type="translate" dur="4s" values="191,191;191,191" repeatCount="indefinite"></animatetransform>
			<animatetransform attributeName="transform" additive="sum" type="rotate" dur="3600s" values="450,0 0;90 0 0" repeatCount="indefinite"></animatetransform>
			<rect x="0" y="0" width="16" height="104" fill="url(#arrow1)" rx="8" ry="8" transform="translate(-8, -8)"> /&gt;
		</rect></g>
	
		<g width="200" height="200" transform="translate(192.709 195) rotate(34.9959)">
			<animatetransform attributeName="transform" type="translate" dur="4s" values="195,195;190,195" repeatCount="indefinite"></animatetransform>
			<animatetransform attributeName="transform" additive="sum" type="rotate" dur="60s" values="360,0 0;0 0 0" repeatCount="indefinite"></animatetransform>
			<rect class="arrowRed" x="0" y="0" width="8" height="120" fill="url(#arrowRed)" filter="url(#blurred-source)" fill-opacity="0.5" rx="3" ry="3" transform="translate(-3, -20)"></rect>
		</g>
	
		<g width="200" height="200" transform="translate(191 191) rotate(34.9959)">
			<animatetransform attributeName="transform" type="translate" dur="4s" values="191,191;191,191" repeatCount="indefinite"></animatetransform>
			<animatetransform attributeName="transform" additive="sum" type="rotate" dur="60s" values="360,0 0;0 0 0" repeatCount="indefinite"></animatetransform>
			<rect class="arrowRed" x="0" y="0" width="6" height="134" fill="url(#arrowRed)" rx="3" ry="3" transform="translate(-3, -20)"></rect>
		</g>
	
		<g width="200" height="200" transform="translate(191, 191)">
			<circle cx="0" cy="0" r="19" fill="url(#center-knob-outter)"></circle>
			<circle cx="0" cy="0" r="10" fill="url(#center-knob-inner)"></circle>
		</g>
		
	</g>
	
</svg></div>



</body><div></div></html>
